<template>
  <div class="basic-card-outer"
        @mouseover="touchState.start()"
         @mouseout.prevent="touchState.cancel()" :class="[...touchState.classes]"
       @touchstart="touchState.start()"
         @touchend="touchState.cancel()">
    <div :class="[...classes]" class="basic-card-inside" style="height: calc( 100% - 4px );background-color: white">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import {computed, defineComponent, reactive, ref, toRefs, watch} from 'vue'

export default defineComponent({
  name: 'basic-card',
  props: {
    hovered: {
      type: [Boolean, String],
      default: 'auto',
      validator(val) {
        if (val == null) return true;
        if (typeof val == "string") {
          return (['true', 'false', 'auto'].indexOf(val) >= 0)
        } else return typeof val == 'boolean';
      }
    },
    radius: {
      type: [Boolean, String],
      default: 'true',
      validator(val) {
        if (val == null) return true;
        if (typeof val == "string") {
          return (['true', 'false'].indexOf(val) >= 0)
        } else return typeof val == 'boolean';
      }
    },
    padding: {
      type: [Boolean, String],
      default: 'true',
      validator(val) {
        if (val == null) return true;
        if (typeof val == "string") {
          return (['true', 'false'].indexOf(val) >= 0)
        } else return typeof val == 'boolean';
      }
    },
    borderLighting: {
      type: [Boolean, String],
      default: 'false',
      validator(val) {
        if (val == null) return true;
        if (typeof val == "string") {
          return (['true', 'false','auto'].indexOf(val) >= 0)
        } else return typeof val == 'boolean';
      }
    },
    hoverMove:{
      type: [Boolean, String],
      default: 'auto',
      validator(val) {
        if (val == null) return true;
        if (typeof val == "string") {
          return (['true', 'false','auto','none'].indexOf(val)>=0)
        } else return typeof val == 'boolean';
      }
    }
  },
  setup(props: any) {
    const hovered=computed(()=>props.hovered);
    const hoverMove=computed(()=>props.hoverMove);
    const radius=computed(()=>props.radius);
    const padding=computed(()=>props.padding);
    const borderLighting=computed(()=>props.borderLighting);

    const classes = computed(()=>{
      let classList=[];
      if (hovered.value !== 'auto') {
        if (typeof hovered.value == 'string'&&hovered.value==='true') classList.push('basic-card-hover');
        else if (typeof hovered.value != 'string'&&hovered.value) classList.push('basic-card-hover')
      } else {
        classList.push('basic-card-hover-auto')
      }

      if(hoverMove.value.toString()=='true'){
        classList.push('basic-card-hover-move');
      }else if(hoverMove.value=='auto'){
        if (hovered.value=='auto')classList.push('basic-card-hover-move');
      }


      if(radius.value.toString()=='true'){
        classList.push('basic-card-outer-hover-border-radius');
      }else{
        classList.push('basic-card-outer-hover-border-radius-none');
      }



      if(padding.value.toString()=='true'){
        classList.push('basic-card-inside-padding');
      }

      if(borderLighting.value.toString()=='true'){
        classList.push('basic-card-outer-border-light-forever');
      }else if(borderLighting.value.toString()=='auto'){
        classList.push('basic-card-outer-border-light')
      }

      return classList
    })

    const touchState=reactive({
      classes:[],
      start(){
        touchState.classes.push('basic-card-hover-real');
      },
      cancel(){
        touchState.classes=[];
      }
    })


    return {
      touchState,
      classes,
    }
  }
})
</script>
<style lang="less" scoped>


.basic-card-outer-hover-border-radius{
  border-radius: 0.8em;
}

.basic-card-outer-hover-border-radius-none{
  border-radius: 0;
}

.basic-card-outer {
  display: inline-block;
  box-sizing: border-box;
  //margin: 5px;
  div{
    margin: 2px;
    box-sizing: border-box;
  }
}

.basic-card-inside-padding{
  padding: 4px;
}


.basic-card-hover {
  box-shadow: 0px 0px 10px 1px rgb(124 124 124 / 0.53);
}

.basic-card-hover-auto {
  transition: all .32s cubic-bezier(.22, .61, .36, 1);
}

//.basic-card-hover-auto:hover {
//  box-shadow: 0px 0px 10px 1px rgb(124 124 124 / 0.53);
//}

.basic-card-hover-real{
  .basic-card-hover-move{
    transform: translateY( -8px );
  }
  .basic-card-hover-auto {
    box-shadow: 0px 0px 10px 1px rgb(124 124 124 / 0.53);
  }
  .basic-card-outer-border-light{
    border-color: #1364f1;
  }
}

.basic-card-hover-move{
  transition: all .32s cubic-bezier(.22, .61, .36, 1);
}
//.basic-card-hover-move:hover{
//  transform: translateY( -4px );
//}

.basic-card-outer-border-light{
  border: 2px solid white;
  transition: all .32s cubic-bezier(.22, .61, .36, 1);
}
//.basic-card-outer-border-light:hover{
//  border-color: #1364f1;
//}
.basic-card-outer-border-light-forever{
  border: 2px solid #1364f1;
}


</style>
